<template>
    <div class="searchInfo">
        检索 <i style="color: #e6a23c;">{{ search }} </i> 共 {{ pageTotal }} 条
    </div>
    <el-empty v-if="pageTotal === 0" description="抱歉没有找到相关的作品" />
    <el-space wrap>
        <el-card v-for="(item, index) in plantList" :body-style="{ padding: '10px' }" class="plantItem"
            @click="toDetail(item.plantId)">
            <el-row style="height: 180px;">
                <el-col :span="6">
                    <img :src="item.plantPicture" class="image" />
                </el-col>
                <el-col :span="18">
                    <span v-html="showData(item.plantName)"></span>
                    <el-tag style="margin-left: 10px;" :type="item.userName === '管理员' ? 'success' : ''">{{ item.userName
                    }}</el-tag>
                    <div style="float: right;">
                        <el-text style="margin-right: 5px;" v-html="showData(item.plantSpecific)"></el-text>
                        <el-text v-html="showData(item.latinName)"></el-text>
                    </div>
                    <el-text tag="p" class="text-indent" v-html="showData(item.plantDescription)"></el-text>
                </el-col>
            </el-row>
            <el-row style="height: 20px;">
                <div class="bottom">
                    <span class="time">{{ item.address }}</span>
                    <span class="author">{{ formatterDate(item.createTime) }}</span>
                </div>
            </el-row>
        </el-card>
    </el-space>
    <div class="pageBlock">
        <el-pagination v-model:current-page="plantSearch.currentPage" v-model:page-size="plantSearch.pageSize"
            :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, reactive, onMounted, watch } from "vue"
import { useSearchPlantApi } from '@/api/plant/search';
import { formatterDate } from '@/util/dateFormat';

const route = useRoute()
const router = useRouter()
const search = route.params.search

const plantSearch = reactive({
    search: search,
    currentPage: 1,
    pageSize: 10
})

const pageTotal = ref(0)
const plantList = ref()

const query = async () => {
    const { data, total } = await useSearchPlantApi(plantSearch)
    pageTotal.value = total
    plantList.value = data
}

onMounted(() => {
    if (search) {
        document.title = '图片检索：' + search + ' | Share Plant'
    } else {
        router.push({ name: '404' })
    }
    query()
})

watch(router.currentRoute, (oldValue, newValue) => {
    if (oldValue.params.search !== newValue.params.search) {
        refresh()
    }
})

function handleSizeChange() {
    query()
}
function handleCurrentChange() {
    query()
}

const toDetail = (data: any) => {
    sessionStorage.removeItem("navigation_index");
    router.push({ name: 'detail', params: { id: data } })
}

const showData = (val: any) => {
    if (
        val.indexOf(search) !== -1 &&
        search !== ''
    ) {
        return val.replaceAll(
            search,
            '<font color="#e6a23c">' + search + '</font>'
        )
    } else {
        return val
    }
}

function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}


</script>

<style lang="scss" scoped>
.searchInfo {
    height: 30px;
    line-height: 30px;
    padding: 10px;
    padding-left: 40px;
    margin-bottom: 10px;
    border: 1px solid #efefef;
    background-color: #fff;
}

.time {
    font-size: 14px;
    color: #999;
}

.author {
    font-size: 14px;

    color: #414141;
}

.bottom {
    // margin-top: 13px;
    width: 100%;
    height: 20px;
    line-height: 20pxpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 160px;
    height: 160px;
}

.plantItem {
    cursor: pointer;
    width: 730px;
}

.selectItem {
    margin-right: 20px;
}

.pageBlock {
    text-align: center;
    margin-top: 20px;
    margin-left: 530px;
}

.text-indent {
    text-indent: 24px;
    line-height: 26px;
}
</style>